import { useState } from 'react'
import BaseLayout from '@/layouts/BaseLayout/BaseLayout'
import Codepensvg from '@/utils/Codepensvg'
import Copysvg from '@/utils/Copysvg'
import { Tag, Icon } from 'ygbh'
import classNames from 'classnames';

function Case1(props:any) {
	const codeUrl = 'https://codepen.io/xiebaolin/pen/PoKGBRR';
	const codeVal = `
	import { Tag } from 'ygbh';
	ReactDOM.render(
	  <>
	    <div>
		<Tag>Tag 1</Tag>
		<Tag><a href="https://gitee.com/xiebaolin/ygbh-react">Link</a></Tag>
		<Tag closable onClose={onClose01}>Tag 2</Tag>
		<Tag closable closeIcon={<Icon name="delete"></Icon>}>Tag 2</Tag>
	    </div>
	  </>,
	  mountNode,
	);
	`;
	//实例-start
	const [showCoreFlag, setShowCoreFlag] = useState(false);
	
	const classString = classNames('source-case-mod', {
		'show-case-core': showCoreFlag,
	});
	const toggleCoreFlag = () => {
		setShowCoreFlag(!showCoreFlag);
	};
	const copyCaseFn = () => {
		let input:any = document.getElementById("globalInputCopy");
		input.value = codeVal; // 修改文本框的内容
		input.select(); // 选中文本
		document.execCommand("copy");
		input = null;
		alert('复制成功');
	};
	const onClose01 = (e:any) => {
		console.log('onClose01', e);
	}
	return (<div className="demo-block">
	    <section className={classString}>
	        <section className="code-box-demo">
	            <div>
					<Tag>Tag 1</Tag>
					<Tag><a href="https://gitee.com/xiebaolin/ygbh-react">Link</a></Tag>
					<Tag closable onClose={onClose01}>Tag 2</Tag>
					<Tag closable closeIcon={<Icon name="delete"></Icon>}>Tag 2</Tag>
				</div>
	        </section>
	        <section className="code-box-meta">
	            <div className="code-box-title">基本</div>
	            <div className="code-box-description">基本标签的用法，可以通过添加 closable 变为可关闭标签。可关闭标签具有 onClose 事件。</div>
	            <div className="code-box-actions">
	            	<a href={codeUrl} className="code-box-code-action code-box-code-action1" target='_blank' title='在 CodePen 中打开'>
	            		<Codepensvg></Codepensvg>
	            	</a>
	            	<span className="code-box-code-action code-box-code-action2" title='复制代码' onClick={copyCaseFn}>
	            	    <Copysvg></Copysvg>
	            	</span>
	            	<span className="code-box-code-action code-box-code-action3" title='显示代码' onClick={toggleCoreFlag}></span>
	            </div>
	        </section>
	        <section className="highlight-wrapper">
	            <textarea className="demo-core-box height200" readOnly={true} defaultValue={codeVal}></textarea>
	        </section>
		</section>
	</div>);
}

function Case2(props:any) {
	const codeUrl = 'https://codepen.io/xiebaolin/pen/PoKGBRR';
	const codeVal = `
	import { Tag } from 'ygbh';
	ReactDOM.render(
	  <>
	    <div>
		<Tag color="#f50">#f50</Tag>
		<Tag color="#2db7f5">#2db7f5</Tag>
		<Tag color="#87d068">#87d068</Tag>
	    </div>
	  </>,
	  mountNode,
	);
	`;
	//实例-start
	const [showCoreFlag, setShowCoreFlag] = useState(false);
	
	const classString = classNames('source-case-mod', {
		'show-case-core': showCoreFlag,
	});
	const toggleCoreFlag = () => {
		setShowCoreFlag(!showCoreFlag);
	};
	const copyCaseFn = () => {
		let input:any = document.getElementById("globalInputCopy");
		input.value = codeVal; // 修改文本框的内容
		input.select(); // 选中文本
		document.execCommand("copy");
		input = null;
		alert('复制成功');
	};
	const onClose01 = (e:any) => {
		console.log('onClose01', e);
	}
	return (<div className="demo-block">
	    <section className={classString}>
	        <section className="code-box-demo">
				<div>
					<Tag color="#f50">#f50</Tag>
					<Tag color="#2db7f5">#2db7f5</Tag>
					<Tag color="#87d068">#87d068</Tag>
				</div>
	        </section>
	        <section className="code-box-meta">
	            <div className="code-box-title">多彩标签</div>
	            <div className="code-box-description">我们添加了多种预设色彩的标签样式，用作不同场景使用。如果预设值不能满足你的需求，可以设置为具体的色值。</div>
	            <div className="code-box-actions">
	            	<a href={codeUrl} className="code-box-code-action code-box-code-action1" target='_blank' title='在 CodePen 中打开'>
	            		<Codepensvg></Codepensvg>
	            	</a>
	            	<span className="code-box-code-action code-box-code-action2" title='复制代码' onClick={copyCaseFn}>
	            	    <Copysvg></Copysvg>
	            	</span>
	            	<span className="code-box-code-action code-box-code-action3" title='显示代码' onClick={toggleCoreFlag}></span>
	            </div>
	        </section>
	        <section className="highlight-wrapper">
	            <textarea className="demo-core-box height200" readOnly={true} defaultValue={codeVal}></textarea>
	        </section>
		</section>
	</div>);
}

function Case3(props:any) {
	const codeUrl = 'https://codepen.io/xiebaolin/pen/PoKGBRR';
	const codeVal = `
	import { Tag, Icon } from 'ygbh';
	ReactDOM.render(
	  <>
	    <div>
		<Tag color="#55acee" icon={<Icon name="picture-outline"></Icon>}>图标1</Tag>
		<Tag color="#cd201f" icon={<Icon name="circle-check"></Icon>}>图标2</Tag>
		<Tag color="#3b5999" icon={<Icon name="plus"></Icon>}>图标3</Tag>
	    </div>
	  </>,
	  mountNode,
	);
	`;
	//实例-start
	const [showCoreFlag, setShowCoreFlag] = useState(false);
	
	const classString = classNames('source-case-mod', {
		'show-case-core': showCoreFlag,
	});
	const toggleCoreFlag = () => {
		setShowCoreFlag(!showCoreFlag);
	};
	const copyCaseFn = () => {
		let input:any = document.getElementById("globalInputCopy");
		input.value = codeVal; // 修改文本框的内容
		input.select(); // 选中文本
		document.execCommand("copy");
		input = null;
		alert('复制成功');
	};
	const onClose01 = (e:any) => {
		console.log('onClose01', e);
	}
	return (<div className="demo-block">
	    <section className={classString}>
	        <section className="code-box-demo">
				<div>
					<Tag color="#55acee" icon={<Icon name="picture-outline"></Icon>}>图标1</Tag>
					<Tag color="#cd201f" icon={<Icon name="circle-check"></Icon>}>图标2</Tag>
					<Tag color="#3b5999" icon={<Icon name="plus"></Icon>}>图标3</Tag>
				</div>
	        </section>
	        <section className="code-box-meta">
	            <div className="code-box-title">多彩标签</div>
	            <div className="code-box-description">我们添加了多种预设色彩的标签样式，用作不同场景使用。如果预设值不能满足你的需求，可以设置为具体的色值。</div>
	            <div className="code-box-actions">
	            	<a href={codeUrl} className="code-box-code-action code-box-code-action1" target='_blank' title='在 CodePen 中打开'>
	            		<Codepensvg></Codepensvg>
	            	</a>
	            	<span className="code-box-code-action code-box-code-action2" title='复制代码' onClick={copyCaseFn}>
	            	    <Copysvg></Copysvg>
	            	</span>
	            	<span className="code-box-code-action code-box-code-action3" title='显示代码' onClick={toggleCoreFlag}></span>
	            </div>
	        </section>
	        <section className="highlight-wrapper">
	            <textarea className="demo-core-box height200" readOnly={true} defaultValue={codeVal}></textarea>
	        </section>
		</section>
	</div>);
}

function Demo() {
	return (
		<BaseLayout>
		    <h2 className="intro-title">Tag 标签</h2>
		    <p className="intro-content">进行标记和分类的小标签。</p>
			<h3 className="show-case-title">代码演示</h3>
			{/*演示*/}
			<Case1></Case1>
			<Case2></Case2>
			<Case3></Case3>
		    {/*介绍*/}
			<h3 className="base-title">Attributes</h3>
			<table className="attri-table">
				<thead>
					<tr>
						<th>参数</th>
						<th>说明</th>
						<th>类型</th>
						<th>默认值</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>closable</td>
						<td>标签是否可以关闭（点击默认关闭）</td>
						<td>boolean</td>
						<td>false</td>
					</tr>
					<tr>
						<td>closeIcon</td>
						<td>自定义关闭按钮</td>
						<td>ReactNode</td>
						<td>--</td>
					</tr>
					<tr>
						<td>color</td>
						<td>标签色</td>
						<td>string</td>
						<td>--</td>
					</tr>
					<tr>
						<td>icon</td>
						<td>设置图标</td>
						<td>ReactNode</td>
						<td>--</td>
					</tr>
					<tr>
						<td>onClose</td>
						<td>关闭时的回调（可通过 e.preventDefault() 来阻止默认行为）</td>
						<td>--</td>
						<td>--</td>
					</tr>
				</tbody>
			</table>
		</BaseLayout>
	)
}

export default Demo
